<template>
  <div class="price-component">
    <p class="new">
      <span class="unit">￥</span>{{ price }}
    </p>
    <p class="old">
      <span class="unit">￥</span>
      <span>{{ oldPrice }}</span>
    </p>
  </div>
</template>

<script>
export default {
  name: 'PriceComponent',
  props: {
    price: {
      type: Number
    },
    oldPrice: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style scoped lang="stylus">
.price-component
  height 35px
  line-height 35px
  p
    display inline-block
    &.old
      margin-left 5px
      text-decoration line-through
      color #ccc
      .unit
        font-size 10px
    &.new
      font-size 16px
      font-weight 700
      color red
      .unit
        font-size 12px
</style>
